<template>
	<view>
		<view class="rent-info white-bg mb-24">
			<view class="title">{{ dataform.title }}</view>
			<view style="color: #A6A6A6;margin-top: 24rpx;">
				<text style="margin-right: 18rpx;">编号：{{dataform.askrentId || dataform.buystoreId}}</text>
				<text>更新时间：{{dataform.updateTime}}</text>
			</view>
			<view class="acea-row rent-types pd-t-b-24 border-b">
				<view class="type" v-for="(item,index) in dataform.storeAdvantage" :key="index">{{item}}</view>
			</view>
			
			<view class="acea-row  pd-t-b-24 row-between">
				<!-- 浏览、咨询统计 -->
				<view class="acea-row row-middle visit-box  row-between  border-b">
					<view class="visit-advtar" @click="toVisitor">
						<image :src="m.avatar" mode=""
							v-for="(m,ind) in dataform.managementResponse?dataform.managementResponse:[]" :key="ind"
							:style="{left: (20 * ind) + 'rpx'}"></image>
					</view>
				</view>
				<view class="acea-row visit-info row-middle">
					<view @click="toVisitor">{{ dataform.view || 0 }}人浏览</view>
					<view>{{dataform.communication &&dataform.communication != 0? dataform.communication : ((Math.floor(Math.random() * (500 - 50 + 1)) + 50))}}人咨询</view>
				</view>

				<!-- <view>50人感兴趣</view> -->

				<view class="acea-row row-middle row-right share-btns" style="">
					<button open-type="share">
						<image src="../static/images/wechat_icon.png" mode=""></image>
						<!-- <view style="font-size: 23rpx;">微信</view> -->

					</button>
					<button @click="toReport" style="margin-left: 15rpx;">
						<image src="../static/images/report_icon.png" mode=""></image>
						<!-- <view style="font-size: 23rpx;">举报</view> -->
					</button>
				</view>
			</view>
			<view style="margin-top: 15rpx;">
				<u-alert v-if="matchTotal > 0" :title="'已为这条信息找到 '+matchTotal+' 个感兴趣的人，点击查看详情！'"	@click="toMatchPage" type = "error"></u-alert>
			</view>
		</view>
		<!-- 求租详情 -->
		<view class="module-box white-bg mb-24" v-if="dataform.askrentId">
			<view class="module-title">求租详情</view>
			<view class="acea-row row-middle row-between ">
				<view class="acea-row row-middle w-48 pd-t-b-24" v-if="dataform.householdTypeName">
					<view class="label">户型</view>
					<view class="text">{{ dataform.householdTypeName || '' }}</view>
				</view>
				<view class="acea-row row-middle w-48 pd-t-b-24">
					<view class="label">租金范围</view>
					<view class="text">{{ dataform.rent || '' }}元</view>
				</view>
				<view class="acea-row row-middle w-48 pd-t-b-24">
					<view class="label">面积范围</view>
					<view class="text">{{ dataform.area || 0 }}㎡</view>
				</view>
				<view class="acea-row row-middle w-48 pd-t-b-24">
					<view class="label">租期</view>
					<view class="text">{{ dataform.reutLongdate || 0 }}个月</view>
				</view>
				<view class="acea-row row-middle w-48 pd-t-b-24" style="width: 100%;">
					<view class="label">计划经营</view>
					<view class="text">{{ dataform.categoryName || '' }}</view>
				</view>
			</view>
			<!-- <view class="acea-row row-middle row-between pd-t-b-24" v-if="type == 1">
				<view class="label">付款方式</view>
				<view class="text">{{ dataform.payTypeName || ''}} </view>
			</view> -->
			<view class="acea-row row-middle row-between pd-t-b-24">
				<view class="label">期望区域</view>
				<view class="text">{{ dataform.hopeAreaName || '' }} </view>
			</view>
			<view class="acea-row row-top row-between pd-t-b-24 border-b">
				<view class="label">配套要求</view>
				<view class="acea-row matching-list">
					<!-- <view class="matching" v-for="(item,index) in dataform.storeAdvantage" :key="index">
						<image :src="item.image" mode=""></image>
						<view class="name line1">{{item.name}}</view>
					</view> -->
					{{dataform.sspre || ''}}
				</view>
			</view>
			<view class="supplement pd-t-b-24">
				<view class="label">补充说明</view>
				<view class="text pd-t-b-24" style="width: 100%;">
					{{ dataform.details || ''}}
				</view>
			</view>
		</view>
		<!-- 求租详情 -->
		<view class="module-box white-bg mb-24" v-else>
			<view class="module-title">求购详情</view>
			<view class="acea-row row-middle row-between pd-t-b-24">

				<view class="acea-row row-middle w-48 pd-t-b-24">
					<view class="label">面积</view>
					<view class="text">{{ dataform.area || 0 }}㎡</view>
				</view>
				<view class="acea-row row-middle w-48 pd-t-b-24">
					<view class="label">楼层</view>
					<view class="text">{{ dataform.floor || '' }}</view>
				</view>
				<view class="acea-row row-middle w-48 pd-t-b-24">
					<view class="label">投资金额</view>
					<view class="text">{{ dataform.money || 0 }}万元</view>
				</view>
				<view class="acea-row row-middle w-48 pd-t-b-24">
					<view class="label">单价</view>
					<view class="text">{{ dataform.price || 0 }}元/㎡</view>
				</view>

				<view class="acea-row row-middle pd-t-b-24" style="width: 100%;">
					<view class="label">付款方式</view>
					<view class="text">{{ dataform.payTypeName ||'' }}</view>
				</view>
				<view class="acea-row row-middle pd-t-b-24" style="width: 100%;">
					<view class="label">期望区域</view>
					<view class="text">{{ dataform.hopeAreaName || '' }}</view>
				</view>
				<view class="acea-row row-middle pd-t-b-24" style="width: 100%;">
					<view class="label" style="width: 80px;">投资回报率</view>
					<view class="text" style="width: calc( 100% - 80px)">{{ dataform.rate || 0 }}%</view>
				</view>
				<view class="acea-row row-middle">
					<view class="supplement pd-t-b-24">
						<view class="label">补充说明</view>
						<view class="text pd-t-b-24" style="width: 100%;">
							{{ dataform.details || ''}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 联系人 -->
		<view class="module-box white-bg mb-24">
			<contacts-list :list="dataform.contacts" :info="dataform"></contacts-list>
		</view>
		<view class="uni-p-b-98"></view>
		<countDown ref="countDown" />
		<report :link-id="dataform.infos" :types="type == 0?1:2" ref="report" />
		<detail-footer :contact="dataform" :info="dataform"></detail-footer>
	</view>
</template>

<script>
	import detailFooter from '../components/footer/footer.vue'
	import contactsList from '../components/contactsList/contactsList.vue'
	import countDown from '@/pages/details/components/countDown.vue'
	import report from "@/pages/details/components/goods_report/report.vue"
	import {
		GroupDetailApi,
		BuyDetailApi
	} from '@/api/subletOfShop.js'
	import matchMixins from '@/mixins/match.js'
	import app from '../../../store/modules/app'

	export default {
		components: {
			detailFooter,
			contactsList,
			countDown,
			report
		},
		mixins:[matchMixins],
		onLoad(option) {

			this.mind = option.mind ? option.mind : this.mind
			let id = option.askrentId ? option.askrentId : option.buystoreId;

			if (option.spread) {
				id = option.id;
				let spreadType = getApp().globalData.spreadType;
				this.shareInfo.shareId = option.spread
				this.shareInfo.infoType = spreadType;
				this.type = spreadType == 2 ? 0 : 1;
				if (this.type == 0) {
					option.askrentId = id;
				} else {
					option.buystoreId = id;
				}
			} else {
				this.type = option.askrentId ? 0 : 1;
				this.shareInfo.infoType = this.type == 0 ? 2 : 3;
			}
			this.detailInfo.storeCategory = option.storeCategory;
			if (this.type == 1) {
				uni.setNavigationBarTitle({
					title: '求购详情'
				});
			}
			this.shareInfo.infoId = id;
			this.toDetail(id);

		},
		data() {
			return {
				rentTypes: [1, 2, 3],
				matching: {
					'停车位': '../static/images/matching_01.png',
					'天然气': '../static/images/matching_02.png',
					'网络': '../static/images/matching_03.png',
					'上水': '../static/images/matching_04.png',
					'排烟': '../static/images/matching_05.png',
					'排污': '../static/images/matching_06.png',
					'可明火': '../static/images/matching_07.png',
					'下水': '../static/images/matching_08.png'
				},
				dataform: {},
				shareInfo: {
					isInitStatus: 0,
					shareId: '',
					infoId: '',
					infoType: 2,
				},
				matchTotal: 0,
				mind: '',
				type: 0, //0求租 1求购
				detailInfo:{
					storeCategory:''
				}
			};
		},
		methods: {
			toDetail(id) {
				if (this.$location && this.$location.latitude && this.$location.longitude) {
					this.getList(id);
				} else {
					setTimeout(() => {
						this.toDetail(id);
					}, 800)
				}
			},
			toMatchPage(){
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/match?data=" + JSON.stringify(
						this.dataform)
				})
			},
			//
			async getList(id) {
				uni.showLoading({
					title: "加载中"
				})
				try {
					let p = {storeCategory:this.detailInfo.storeCategory};
					let {
						data
					} = this.type == 0 ? await GroupDetailApi(id,p) : await BuyDetailApi(id,p)

					if (this.type == 0) {
						data.sspre = data.storeAdvantage
						data.storeAdvantage = data.storeAdvantageName?.split('/');

						// data.sspre = data.sspreName?.split('/').map(item => {
						// 	let d = {
						// 		name: item
						// 	}
						// 	d.image = this.matching[item] || '';
						// 	return d
						// })
					}
					console.log('data--', data)
					this.shareInfo.isInitStatus = 1;
					this.dataform = data;
					this.dataform.infos = this.dataform.askrentId || this.dataform.buystoreId;
					this.toMatch(this.dataform,1,0,d=>{
						console.log("--------匹配start-------")
						console.log(d)
						if(d){
							this.matchTotal = d.data.total;
						}
						console.log("--------匹配end-------")
					})
					uni.hideLoading()
				} catch (e) {
					console.log('报错', e)
					uni.hideLoading()
					//TODO handle the exception
				}
			},
			toReport() {
				this.$refs.report.open();
			},
			toVisitor() {
				console.log('--', this.dataform)
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/visitor?mind=" + this.mind + "&data=" + JSON.stringify(
						this.dataform)
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "../static/css/index.scss";

	.rent-info {
		padding: 30rpx;

		.title {
			font-size: 40rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);

			text {
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}
		}
	}

	.rent-types {
		.type {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
			padding: 10rpx 36rpx;
			border-radius: 10rpx;
			background: rgba(255, 232, 234, 1);
			margin-right: 28rpx;
		}
	}

	.visit-info {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(166, 166, 166, 1);

		view {
			margin-right: 24rpx;
		}
	}
</style>